<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音频和视频标签</title>
		<style>
			hr {
				border: 2px solid red;
				background: red;
				width: 50%;
				margin-left: 0px;
			}
			audio {/* 获取所有的audio元素 */
				width: 300px;
				height: 30px;
				border: 2px solid blue;
				/* 设置圆角边框 */
				border-radius: 20px;
			}
			/* 匹配获得焦点的audio、video元素 */
			audio:focus, video:focus {
				/* 设置元素的外围（包在边框外的线） */
				outline: none;
				/* outline: #00ff00 dotted thick; */
			}
			video {
				width: 50%;
				border: 2px solid red;
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<h1>达内云音乐</h1>
		<hr />
		十分荣幸：<br /><br />
		<audio controls="controls" src="audio/十分荣幸%20-%20极度造势.mp3" >
			如果您看到这段内容，则说明当前浏览器不支持audio
		</audio>
		
		<h1>达内云视频</h1>
		<hr />
		<!-- autoplay：自动播放 -->
		<video autoplay="autoplay" controls="controls" src="video/123.mp4">
			<!-- 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a> -->
		</video>
	</body>
</html>
